<!-- frontend/src/components/ActionDrawer.vue -->
<template>
    <el-drawer :model-value="visible" title="新建目录" direction="rtl" size="35%" @close="handleClose" @open="onDrawerOpen">
        <!-- 抽屉的主体内容 -->
        <div class="drawer-body">
            <el-form :model="form" label-position="top" @submit.prevent="handleCreateFolder">
                <el-form-item label="目录名">
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入" maxlength="254"
                        show-word-limit />
                </el-form-item>
            </el-form>
            <!-- 帮助说明文本 -->
            <div class="dialog-help-text">
                <p>目录命名规范：</p>
                <ol>
                    <li>不允许使用表情符，请使用符合要求的 UTF-8 字符。</li>
                    <li>为避免歧义，文件夹名（或前缀）不建议以 / 或 \ 开头、结尾。</li>
                    <li>不允许出现连续的 /。</li>
                    <li>总长度控制在 1-254 个字符。</li>
                </ol>
            </div>
        </div>

        <!-- 抽屉的脚部，放置操作按钮 -->
        <template #footer>
            <div style="text-align: left;">
                <el-button type="primary" :loading="isLoading" @click="handleCreateFolder">确定</el-button>
                <el-button @click="handleClose">取消</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import apiClient from '../api'; // 引入 axios 实例

// =======================================================
// 1. 定义 Props & Emits (简化版)
// =======================================================
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    bucketName: {
        type: String,
        required: true,
    },
    // 新增：需要知道在哪个路径下创建目录
    currentPath: {
        type: String,
        required: true,
    },
});

// 'update:visible' 用于 v-model
// 'success' 用于通知父组件创建成功，以便刷新列表
const emit = defineEmits(['update:visible', 'success']);

// =======================================================
// 2. 定义组件内部状态 (非常简单)
// =======================================================
const isLoading = ref(false);
const form = ref({
    name: '',
});

// =======================================================
// 3. 定义核心方法
// =======================================================

// 关闭抽屉
const handleClose = () => {
    emit('update:visible', false);
};

// 提交表单，创建目录
async function handleCreateFolder() {
    if (!form.value.name.trim() || form.value.name.includes('/')) {
        ElMessage.warning('目录名不能为空且不能包含 /');
        return;
    }

    isLoading.value = true;
    const formData = new FormData();
    formData.append('folder_name', form.value.name);

    try {
        // 调用后端创建目录的 API
        await apiClient.post(
            `/api/v1/create-folder/buckets/${props.bucketName}/${props.currentPath}`,
            formData
        );

        ElMessage.success('目录创建成功！');
        emit('success'); // 发送成功事件
        handleClose();   // 关闭抽屉

    } catch (error) {
        console.error('创建目录失败:', error);
        ElMessage.error(error.response?.data?.error || '创建目录失败');
    } finally {
        isLoading.value = false;
    }
}

// 抽屉打开时，清空输入框 (可选，但体验好)
const onDrawerOpen = () => {
    form.value.name = '';
    isLoading.value = false;
}

</script>

<style scoped>
/* 这些样式可以复用，或者根据需要调整 */
.drawer-body {
    padding: 0 20px;
}

.dialog-help-text {
    background-color: #f4f4f5;
    padding: 8px 16px;
    border-radius: 4px;
    color: #909399;
    font-size: 13px;
    line-height: 1.6;
}

.dialog-help-text ol {
    padding-left: 20px;
    margin: 0;
}

.dialog-help-text p {
    margin: 0 0 5px 0;
    font-weight: bold;
}
</style>